@extends('layout.default')

@section('layout.content')
  <div class="space-18"></div>
  <div class="row">
    <div class="col-xs-12">
      <form class="form-horizontal" id="exam-create" autocomplete="off">
        <div class="form-group">
          <label class="col-sm-2 control-label no-padding-right" for="title"> <b><span class="red align-middle">*</span> 题目：</b>
          </label>
          <div class="col-sm-8">
            <input type="text" class="form-control" name="title" placeholder="题目"/>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label no-padding-right" for="type"> <b><span class="red align-middle">*</span> 类型：</b>
          </label>
          <div class="col-sm-6">
            <div class="radio">
              <label class="inline no-padding-left">
                <input name="type" type="checkbox" value="0" class="ace ace-checkbox-2 input-lg" checked>
                <span class="lbl"> 儿童题型</span>
              </label>
              <label class="inline">
                <input name="type" type="checkbox" value="1" class="ace ace-checkbox-2 input-lg">
                <span class="lbl"> 成人题型</span>
              </label>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label no-padding-right" for="number"> <b><span class="red align-middle">*</span> 选项：</b>
          </label>
          <div class="col-sm-8">
            <table class="table table-hover table-striped table-bordered nonborder">
              <tbody>
                @for($i=1;$i<=4;$i++)
                <tr class="bank">
                  <td class="align-center" style="width:60px;">
                    <input name="correct[]" type="checkbox" value="1" class="ace ace-checkbox-2 input-lg">
                    <span class="lbl"> </span>
                  </td>
                  <td class="align-left">
                    <input name="content[]" type="text" class="form-control" placeholder="答案选项"/>
                  </td>
                </tr>
                @endfor
              </tbody>
            </table>
          </div>
        </div>


        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right"> </label>
          <div class="col-sm-4">
            <button type="submit" class="btn btn-primary">
              <i class="ace-icon fa fa-check"></i>
              <span class="">确定</span>
            </button>
          </div>
        </div>

      </form>
    </div>
  </div>
@stop

@section('javascript')

  <script src="//cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script src="{{URL::asset('assets/js/jquery-validate-methods.js')}}"></script>
  <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>


  <script type="text/javascript">
      $(function () {

          $("input:checkbox[name='type']").on('click', function (e) {
              $("input:checkbox[name='type']").not(this).attr("checked", false);
          });

          /*$("input:checkbox[name^='correct']").on('click', function (e) {
              $("input:checkbox[name^='correct']").not(this).attr("checked", false);
          });*/


          /**
           表单前端验证
           */
          $("#exam-create").validate({
              rules: {
                  title: {required: true},
                  type: {required: true},
              },
              messages: {
                  title: {required: "请填写题目标题"},
                  type: {required: "请选择题目类型"}
              },


              /* 失去焦点时不验证 */
              onfocusout: false,
              onkeyup: false,
              errorElement: 'div',
              errorClass: 'help-block',

              success: function (e) {
                  $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
                  $(e).remove();
              },

              showErrors: function (errorMap, errorList) {
                  $.each(errorList, function (i, v) {
                      layer.tips(v.message, v.element, {tips: [3,'#dd0000'], time: 2000});
                      return false;
                  });

              },

              submitHandler: function (form) {
                var content = [];
                $("input[name^='content']").each(function(i, el) {
                  content.push($(this).val());
                });
                console.log(content);
                var correct = [];
                $("input:checkbox[name^='correct']").each(function(i, el) {
                  if($(this).is(":checked")){
                    correct.push("1");
                  }
                  else{
                    correct.push("0");
                  }
                });
                console.log(correct);

                  $.post('{{route('question.store')}}', {
                      '_token': $("input[name='_token']").attr('value'),
                      'title': $("input[name='title']").val(),
                      'type': $("input[name='type']:checked").val(),
                      'content':content,
                      'correct':correct,
                      'is_submit': true
                  }, function (data) {
                      console.log(data);
                      layer.msg(data.message, {time: 1000,shift: -1}, function () {
                          if (data.status === true && data.url != null) {
                              $(window).attr('location', data.url);
                          }
                      });

                  }, 'json').error(function (data) {
                      layer.msg(data.responseJSON.message);
                  });
              }


          });

      });
  </script>
@stop